<template>
  <div class="home">
    <div class="search">
      <div class="left" >
        <div class="text" v-if="!isLogin" @click="toLogin">登录</div>
        <van-icon v-else name="manager" @click="toShow" color="#fbc959"/>
      </div>
      <van-search v-model="value" disabled placeholder="请输入搜索关键词"  @click="toSearch"/>
      <div class="right" @click="toFenlei">
        <van-icon name="bars" color="#fbc959" />
      </div>
    </div>
    <div class="tabBox">
      <van-tabs 
      v-model="activeName" 
      color="#fbc959" 
      title-active-color="#272727" 
      title-inactive-color="#9b9b9b"
      @click="binTo"
      >
        <van-tab title="关注" name="follow"></van-tab>
        <van-tab title="推荐" name="recommend"></van-tab>
        <van-tab title="笔记" name="note"></van-tab>
        <van-tab title="视频" name="video"></van-tab>
        <van-tab title="活动" name="activity"></van-tab>
      </van-tabs>
    </div>
    <div class="content">
      <keep-alive exclude = "Note">
      <router-view ></router-view>
      </keep-alive>
    </div>
    <van-popup v-model="isShow" round :style="{width: '50%',height: '20%'}" >
      <div class="userBox">
        <van-button color="#fbc959" @click="binCookie" round plain>退出登录</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      value: '',
      activeName: 'recommend',
      isLogin:false,
      isShow:false
    };
  },
  methods: {
    binTo(name){
      this.$router.push({ name: name})
    },
    binCookie(){
      let time = new Date().getTime() - 1000*60*60*24
      let g = new Date(time).toUTCString()
      document.cookie = `login = false;expires=` + g;
      this.isLogin=false
      this.isShow=false
    },
    toSearch(){
    this.$router.push({ name: 'hotsearch'})
    },
    toFenlei(){
      this.$router.push({ name: 'fenlei'})
    },
    toLogin(){
      this.$router.push({ name: 'login'})
    },
    toShow(){
      this.isShow = true
    },
    getCookie(cookie_name) {
        var allcookies = document.cookie;
		//索引长度，开始索引的位置
        var cookie_pos = allcookies.indexOf(cookie_name);

        // 如果找到了索引，就代表cookie存在,否则不存在
        if (cookie_pos != -1) {
            // 把cookie_pos放在值的开始，只要给值加1即可
            //计算取cookie值得开始索引，加的1为“=”
            cookie_pos = cookie_pos + cookie_name.length + 1; 
            //计算取cookie值得结束索引
            var cookie_end = allcookies.indexOf(";", cookie_pos);
            
            if (cookie_end == -1) {
                cookie_end = allcookies.length;

            }
            //得到想要的cookie的值
            var value = unescape(allcookies.substring(cookie_pos, cookie_end)); 
        }
        return value;
    }
  },
  created(){
    if (this.getCookie('login') === 'true') {
      this.isLogin = true
    }
    this.$router.push({ name: this.activeName})
  },
  activated(){
    if (this.getCookie('login') === 'true') {
      this.isLogin = true
    }
    this.$router.push({ name: this.activeName})
  }
}
</script>
<style lang="less" scoped>
  .home{
    width: 100%;
    /deep/.van-tab--active{
      font-size: 18px;
      font-weight:bold;
    }
    .search{
      width: 100%;
      height: 55px;
      display: flex;
      align-items: center;
      .van-search{
        flex: 1;
      }
      .right{
        width: 25px;
        height: 25px;
        font-size: 25px;
        margin-right: 10px;
      }
      .left{
        width: 25px;
        height: 25px;
        font-size: 25px;
        margin-left: 10px;
        .text{
          font-size: 12px;
          line-height: 25px;
        }
      }
    }
    .tabBox{
      width: 100%;
      height: 45px;
    }
    .userBox{
      text-align: center;
      margin-top: 25%;
    }
  }
</style>
